<script setup>

import userService from "@/service/impl/UserService.js"
import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {onMounted} from "vue";
import {log} from "@/util/Log.js";
import UserPasswordModel from "@/model/UserPasswordModel.js"
import UserModel from "@/model/UserModel.js"
import Dialog from "@/components/dialog/Dialog.vue";
import dialogJson from "@/components/dialog/dialogJson.js";
import AuthorityBtn from "@/components/AuthorityBtn.vue";

const t = inject("$t")
const data = dataJson()
const module = moduleJson()
const user = ref(new UserModel())
const roles = ref(null)
const passwordDialog = dialogJson()


onMounted(() => {
    module.value.init(userService.url.edit, userService.url.edit,
        userService.url.del, null, null)
    module.value.operations.width = "300px"
    init()
})

const init = () => {
    userService.find(data.value.source()).then(res => {
        let obj = {};
        Object.assign(obj,res)
        obj.data = res.data.page
        roles.value = res.data.roles
        data.value.init(obj)
    }).catch(e => {
        log.info(e)
    })
}

const editOpen = (data, index, type) => {
    let fun = {
        0: () => user.value = new UserModel(),
        1: () => Object.assign(user.value, data)
    }
    fun[type]()
    module.value.dialog.load = false
}

const editConfirm = async (type) => {
    await userService.edit(user.value) ? await init() : null
}

const updatePassword = (row) => {
    passwordDialog.value.data = new UserPasswordModel()
    passwordDialog.value.data.id = row.id
    passwordDialog.value.show = true
    passwordDialog.value.title = t('user.updatePassword')
    passwordDialog.value.width = "50%"
}

const del = async (row) => {
    await userService.del(row) ? await init() : null
}

const upPassword = async () => {
    await userService.updatePassword(passwordDialog.value.data) ?
        await (passwordDialog.show = false) : null
}


</script>
<template>
    <Page
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="del"
        @refresh="init"
        @pageSizeChange="(size) => data.pageSizeChange(size,init)"
        @pageCurrentChange="(current) =>data.pageCurrentChange(current,init)"
    >
        <!-- 定义表格中的列有哪些 -->
        <template #table-column>
            <el-table-column prop="nickName" :label="$t('user.name')"/>
            <el-table-column prop="roleName" :label="$t('user.roleName')" />
            <el-table-column prop="account" :label="$t('user.account')"/>
            <el-table-column prop="email" :label="$t('user.email')"/>
            <el-table-column prop="enableTag" :label="$t('user.enable')">
                <template #default="scope">
                    {{ scope.row.enableTag ? $t('btn.enable') : $t('btn.disable') }}
                </template>
            </el-table-column>
        </template>
        <!-- 当表格中的操作按钮没有你需要的时候可以额外再table-event中扩展 -->
        <template #after-table-event="row">
            <AuthorityBtn :path="userService.url.updatePassword" >
                <el-button type="primary" @click="updatePassword(row.data)">{{$t("user.updatePassword")}}</el-button>
            </AuthorityBtn>
        </template>
        <!-- 定义详情、添加、编辑弹出层中的字段和数据 -->
        <template #table-dialog>
            <el-form :rules="user.rules" :model="user" :label-width="100" :label-position="'left'" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('user.name')" prop="nickName">
                    <el-input v-model="user.nickName" autocomplete="off" clearable/>
                </el-form-item>
                <el-form-item :label="$t('user.email')" prop="email">
                    <el-input v-model="user.email" autocomplete="off" clearable/>
                </el-form-item>
                <el-form-item v-if="!user.id" :label="$t('user.account')" prop="account">
                    <el-input v-model="user.account" autocomplete="off" clearable/>
                </el-form-item>
                <el-form-item v-if="!user.id" :label="$t('user.password')" prop="password">
                    <el-input v-model="user.password" autocomplete="off" clearable/>
                </el-form-item>
                <el-form-item :label="$t('user.role')" prop="roleId">
                    <el-select
                        v-model="user.roleId"
                    >
                        <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('user.enable')" prop="enableTag">
                    <el-switch
                        v-model="user.enableTag"
                        size="small"
                        active-text="启用"
                        inactive-text="停用"
                        :active-value="true"
                        :inactive-value="false"
                    />
                </el-form-item>
            </el-form>
        </template>
        <!-- 搜索 -->
        <template #table-search>

        </template>
    </Page>

    <Dialog :dialog="passwordDialog">
        <el-form :rules="passwordDialog.data.rules" :model="passwordDialog.data" style="width: 100%;">
            <el-form-item :label="$t('user.newPassword')" prop="password">
                <el-input v-model="passwordDialog.data.password" autocomplete="off"/>
            </el-form-item>
            <el-form-item :label="$t('user.okPassword')" prop="password">
                <el-input v-model="passwordDialog.data.okPassword" autocomplete="off"/>
            </el-form-item>
        </el-form>
        <template #table-dialog-btn>
            <el-button @click="passwordDialog.show = false">{{$t('btn.cancel')}}</el-button>
            <el-button type="primary" @click="upPassword">{{$t('btn.confirm')}}</el-button>
        </template>
    </Dialog>
</template>

<style lang="scss" scoped>

</style>
